import React, { Component } from "react";
import { TabBar } from "antd-mobile";
import  TabBarData from "@/config/TabBarData"

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: "menu",
      hidden: false,
    };
  }
  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {
            TabBarData.map(({title,key,icon,selectedIcon,component:CMP})=>{
              return (
                <TabBar.Item
                title={title}
                key="Life"
                icon={
                  <div
                    style={{
                      width: "22px",
                      height: "22px",
                      background:
                        `url(${icon}) center center /  21px 21px no-repeat`,
                    }}
                  />
                }
                selectedIcon={
                  <div
                    style={{
                      width: "22px",
                      height: "22px",
                      background:
                        `url(${selectedIcon}) center center /  21px 21px no-repeat`,
                    }}
                  />
                }
                selected={this.state.selectedTab === key}
                onPress={() => {
                  this.setState({
                    selectedTab: key,
                  });
                }}
                data-seed="logId"
              >
            <CMP {...this.props}/>
              </TabBar.Item>
              )
            })
          }
        </TabBar>
      </div>
    );
  }
}
